<template>
	<view class="detailContainer">
		<scroll-view class="mainScroll" scroll-y="true" enable-flex>
			<view>
				<!-- 顶部轮播图 -->
				<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="swiperItem" v-for="(item, index) in [1, 2, 3, 4]" :key="index">
						<image class="itemImg" :src="goods.imageUrl" mode=""></image>
					</swiper-item>
				</swiper>
				<!-- 价格 -->
				<view class="price_wrap">
					<view class="left_price">
						<text class="price_text">￥</text>
						<text class="price">{{goods.properties.addedCartPrice}}</text>
					</view>
					<image class="collect" src="../../static/images/detail/icon_product_unfavor.png" mode=""></image>
				</view>
				<!-- 商品名称 -->
				<view class="goods">
					<image class="logo" src="../../static/images/detail/tag_self_new.png" mode=""></image>
					<text class="goods_name">{{goods.productName}}</text>
				</view>
				<!-- 商品描述 -->
				<view class="goodsDes">
					<text class="des">{{goods.attributeValues}}</text>
					<image class="coupon" src="../../static/images/detail/quan.png" mode=""></image>
				</view>
			</view>
		</scroll-view>
		<view class="bottom_nav">
			<view class="shopAndShopCart">
				<view class="shop">
					<image class="shop_img" src="../../static/images/detail/icon_product_shop.png" mode=""></image>
					<text class="shop_text">商店</text>
				</view>
				<view class="shop_cart" @click="toCart">
					<image class="shop_cart_img" src="../../static/images/detail/icon_shop_cart.png" mode=""></image>
					<text class="shop_cart_text">购物车</text>
					<view v-show="userInfo.nickName" class="cart_goods_num">
						{{totalNum}}
					</view>
				</view>
			</view>
			
			<view class="btn">
				<view class="left_btn btn_item" @click="addGoodsToCart">
					加入购物车
				</view>
				<view class="right_btn btn_item">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			goods:{},
			userInfo:{},
			productItems:[]
		};
	},
	computed: {
	// ...mapGetters(['productItems']),
	totalNum(){
		return this.productItems.reduce((pre,item) => {
			return pre += +item.count
		},0)
	}
	},
	async mounted() {
		this.goods = wx.getStorageSync('goods')	
		const result = await wx.getStorageSync('userInfo');
		this.userInfo = result	
			if(this.userInfo.nickName){
				//  如果productItems没有数据的话 发送请求拿一次，避免之后与购物车的productItems拿取不是同一个
				if(this.productItems.length < 1){
					await this.$store.dispatch('getProductItems')
					this.productItems = this.$store.state.cart.productItems
				}
			}
		
	},
	methods: {
		toCart() {
			wx.reLaunch({
				url:'/pages/cart/cart'
			})
		},
		async addGoodsToCart(){
			// 判断用户是否登录
			await this.preLogin()
			if(!this.userInfo.nickName)return
			
			//判断购物车中是否有这个商品 有的话修改数量 没有的话再添加
			const newGoods = this.productItems.find(item=>item.gid === this.goods.gid)
			if(newGoods){
				newGoods.count += 1
			}else{
				// console.log(this.productItems)
			 this.$store.commit('ADD_ONE_PRODUCTITEMS',this.goods)
				// console.log(this.productItems)
			}
			

		},
		// 点击加入购物车还有购物车的时候先判断有没有登陆 没有的话 需要先登录 
		async preLogin(){
			// const result = await wx.getStorageSync('userInfo');
			// this.userInfo = result			
			//判断有没有登录 没有登录的话 询问是否登录
			if(this.userInfo.nickName){
				//  如果productItems没有数据的话 发送请求拿一次，避免之后与购物车的productItems拿取不是同一个
				if(this.productItems.length < 1){
					await this.$store.dispatch('getProductItems')
					this.productItems = this.$store.state.cart.productItems
				}
			}else{
				wx.showModal({
				  content: '未登录，是否跳转登录后查看？',
				  success: (res)=> {
				    if (res.confirm) {
				      wx.navigateTo({
						url: `/pages/login/login?redirect=${this.__route__}`
					  })
				    } else if (res.cancel) {
				     // return false
				    }
				  }
				})
				
			
			}
		}
	},
};
</script>

<style lang="scss">
.detailContainer {
	position: relative;
	height: 100%;
	background-color: #ffffff;
	.mainScroll{
		height: calc(100vh - 106rpx);
		display: flex;
	// 轮播图
	.banner {
		width: 750rpx;
		height: 750rpx;
		.swiperItem {
			.itemImg {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}

	// 价格
	.price_wrap {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		.left_price {
			text {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: rgb(153, 98, 26);
			}
			.price_text {
				font-size: 32rpx;
				font-weight: 500;
			}
			.price {
				margin-left: 10rpx;
				font-size: 52rpx;
				font-weight: 500;
			}
		}
		.collect {
			height: 80rpx;
			width: 80rpx;
		}
	}
	// 商品名字
	.goods {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		.logo {
			width: 90rpx;
			height: 36rpx;
		}
		.goods_name {
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 10rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1; /* * 多行文本溢出... */
			overflow: hidden;
		}
	}
	//商品描述
	.goodsDes {
		display: flex;
		flex-direction: column;
		.des {
			padding: 20rpx 48rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4; /* * 多行文本溢出... */
			overflow: hidden;
			font-size: 28rpx;
			color: #888888;
		}
		.coupon {
			height: 84rpx;
			width: 100%;
		}
	}
	}
	//底部导航
	.bottom_nav{
		position: absolute;
		bottom: 0;
		height: 106rpx;
		// width: 100%;
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		.shopAndShopCart{
			display: flex;
			align-items: center;
			.shop,.shop_cart{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
				}
				text{
					color: rgb(48, 49, 51);
					font-size: 24rpx;
					font-weight: bold;
				}
			}
			.shop_cart{
				margin-left: 30rpx;
				position: relative;
				.cart_goods_num{
					position: absolute;
					top: -9rpx;
					left: 40rpx;
					// right: -9rpx;
					height: 36rpx;
					min-width: 36rpx;
					background-color: rgb(255, 27, 27);
					color: #FFFFFF;	
					font-size: 24rpx;
					line-height: 36rpx;
					border-radius: 18rpx;
					padding: 0 3rpx;
					text-align: center;
				}
			}
			
		}
		.btn{
			display: flex;
			align-items: center;
			height: 80rpx;
			margin-left: 20rpx;
			.btn_item{
				height: 80rpx;
				width: 256rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
			}
			.left_btn{
				border-radius: 40rpx 0 0 40rpx;
				 background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
			}
			.right_btn{
				border-radius: 0 40rpx 40rpx 0;
				background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
			}
		}
		
	}
}
</style>
